<template>
  <div class="equipment">
    <top />
    <el-row :span="24" class="titleClass">
      <el-col :span="4">
        <el-button @click="showAddMechine">增加设备</el-button>
      </el-col>
    </el-row>
    <el-dialog title="增加设备" :visible.sync="addMechine" style="width: 800px; padding-left: 300px;">
      <el-form :model="mechineAddForm" label-width="100px">
        <el-form-item label="设备序列号:">
          <el-input v-model="mechineAddForm.mechineId" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="设备名称:">
          <el-input v-model="mechineAddForm.mechineName" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="设备状态:">
          <el-input v-model="mechineAddForm.mechineState" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="设备图片:">
          <el-input v-model="mechineAddForm.mechineImg" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="产能:">
          <el-input v-model="mechineAddForm.mechineCop" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="所属工厂:">
          <el-input v-model="mechineAddForm.factoryId" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addMechine=false">取消</el-button>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-table :data="tableData" style="width: 95%; margin-left: 30px; margin-top: 10px">
      <el-table-column prop="mechineId" label="设备序列号" width="160px"> </el-table-column>
      <el-table-column prop="mechineName" label="设备名称" width="160px"> </el-table-column>
      <el-table-column prop="mechineState" label="设备状态" width="160px"> </el-table-column>
      <el-table-column prop="mechineImg" label="设备图片" width="160px"> </el-table-column>
      <el-table-column prop="mechineCop" label="产能" width="160px"> </el-table-column>
      <el-table-column prop="factoryId" label="所属工厂" width="160px"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="showUpdateMersion(scope.row)">修改设备信息</el-button>
          <el-button size="mini" type="warning" @click="showUpdateMersionState(scope.row)">更改设备状态</el-button>
          <el-button size="mini" type="danger" @click="deleteMechineByMechineId(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改设备信息" :visible.sync="updateMersion" style="width: 800px; padding-left: 300px;">
      <el-form :model="mersionUpdateForm" label-width="100px">
        <el-form-item label="设备序列号:">
          <el-input v-model="mersionUpdateForm.mechineId" style="width: 220px;" disabled></el-input>
        </el-form-item>
        <el-form-item label="设备图片:">
          <el-input v-model="mersionUpdateForm.mechineImg" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="产能:">
          <el-input v-model="mersionUpdateForm.mechineCop" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="所属工厂:">
          <el-input v-model="mersionUpdateForm.factoryId" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="updateMersion=false">取消</el-button>
          <el-button type="primary" @click="onUpdate">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="修改设备状态" :visible.sync="updateMersionState" style="width: 700px; padding-left: 400px;">
      <el-button type="success" @click="yunxing">运行</el-button>
      <el-button type="warning" @click="kongxian">空闲</el-button>
      <el-button type="danger" @click="guzhang">故障</el-button>
      <el-button type="info" @click="tingji">停机</el-button>
    </el-dialog>
  </div>
</template>

<script>
import Top from "@/components/Top.vue";

export default {
  name: "equipment",
  data() {
    return {
      tableData: [],
      state:'',
      addMechine:false,
      updateMersion:false,
      updateMersionState:false,
      mechineAddForm:{mechineId:'',mechineState:'',mechineImg:'',mechineCop:'',factoryId:''},
      mersionUpdateForm:{mechineId:'',mechineImg:'',mechineCop:'',factoryId:''},
      user:{},
      factoryId:this.$route.query.factoryId
    };
  },
  methods:{
    getAllMechine() {
      this.$axios.post(
        "MechineController/listMechineByFactoryId",
        this.$qs.stringify({factoryId:this.factoryId})
      ).then((response) => {
        this.tableData = response.data;
      });
    },
    showAddMechine(){
      this.addMechine=true;
    },
    onSubmit(){
      if(this.mechineAddForm.mechineId==false){
        this.$message.error('设备序列号为空！');
        return;
      }
      for(var i=0;i<this.tableData.length;i++){
        if(this.tableData[i].mechineId==this.mechineAddForm.mechineId){
          this.$message.error('设备序列号重复！');
          return;
        }
      }
      this.$axios.post(
        'MechineController/addMechine',
        this.$qs.stringify({
          mechineId:this.mechineAddForm.mechineId,
          mechineName:this.mechineAddForm.mechineName,
          mechineState:this.mechineAddForm.mechineState,
          mechineImg:this.mechineAddForm.mechineImg,
          mechineCop:this.mechineAddForm.mechineCop,
          factoryId:this.mechineAddForm.factoryId
        })
      ).then((response) => {
        if(response.data == 1){
          this.$message({type: 'success', message: '添加成功!'});
          this.addMechine=false;
        }else{
          alert('添加设备失败！');
        }
        this.getAllMechine();
      }).catch((value) => {
        console.error(value);
      })
    },
    showUpdateMersion(row) {
      this.updateMersion = true;
      this.mersionUpdateForm.mechineId = row.mechineId;
      this.mersionUpdateForm.mechineState = row.mechineState;
      this.mersionUpdateForm.mechineImg = row.mechineImg;
      this.mersionUpdateForm.mechineCop = row.mechineCop;
      this.mersionUpdateForm.factoryId = row.factoryId;
    },
    showUpdateMersionState(row){
      this.updateMersionState = true;
      this.mechineState = row.mechineState;
      this.mechineId = row.mechineId;
    },
    yunxing(){
      this.$confirm(
        "确定修改设备状态为运行？",'提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}
      ).then(() => {
        this.$axios.post(
          'MechineController/updataMechineState',
          this.$qs.stringify({
            mechineId:this.mechineId,
            mechineState:'运行'
          })
        ).then((response) => {
          if(response.data == 1){
            this.$message({type: 'success', message: '修改成功!'});
          }else{
            alert('修改失败！');
          }
          this.updateMersionState = false;
          this.getAllMechine();
        }).catch((value) => {
          console.error(value);
        })
      })
    },
    kongxian(){
      this.$confirm(
        "确定修改设备状态为空闲？",'提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}
      ).then(() => {
        this.$axios.post(
          'MechineController/updataMechineState',
          this.$qs.stringify({
            mechineId:this.mechineId,
            mechineState:'空闲'
          })
        ).then((response) => {
          if(response.data == 1){
            this.$message({type: 'success', message: '修改成功!'});
          }else{
            alert('修改失败！');
          }
          this.updateMersionState = false;
          this.getAllMechine();
        }).catch((value) => {
          console.error(value);
        })
      })
    },
    guzhang(){
      this.$confirm(
        "确定修改设备状态为故障？",'提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}
      ).then(() => {
        this.$axios.post(
          'MechineController/updataMechineState',
          this.$qs.stringify({
            mechineId:this.mechineId,
            mechineState:'故障'
          })
        ).then((response) => {
          if(response.data == 1){
            this.$message({type: 'success', message: '修改成功!'});
          }else{
            alert('修改失败！');
          }
          this.updateMersionState = false;
          this.getAllMechine();
        }).catch((value) => {
          console.error(value);
        })
      })
    },
    tingji(){
      this.$confirm(
        "确定修改设备状态为停机？",'提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}
      ).then(() => {
        this.$axios.post(
          'MechineController/updataMechineState',
          this.$qs.stringify({
            mechineId:this.mechineId,
            mechineState:'停机'
          })
        ).then((response) => {
          if(response.data == 1){
            this.$message({type: 'success', message: '修改成功!'});
          }else{
            alert('修改失败！');
          }
          this.updateMersionState = false;
          this.getAllMechine();
        }).catch((value) => {
          console.error(value);
        })
      })
    },
    onUpdate(){
      if(this.mersionUpdateForm.mechineId==false){
        this.$message.error('设备序列号为空！');
        return;
      }
      this.$axios.post(
        'MechineController/updataMechine',
        this.$qs.stringify({
          mechineId:this.mersionUpdateForm.mechineId,
          mechineImg:this.mersionUpdateForm.mechineImg,
          mechineCop:this.mersionUpdateForm.mechineCop,
          factoryId:this.mersionUpdateForm.factoryId
        })
      ).then((response) => {
        if(response.data == 1){
          this.$message({type: 'success', message: '修改成功!'});
          this.updateMersion=false;
        }else{
          alert('修改设备失败！');
        }
        this.getAllMechine();
      }).catch((value) => {
        console.error(value);
      })
    },
    deleteMechineByMechineId(row) {
      this.$confirm(
        "确定删除："+row.mechineId+"？",'提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}
      ).then(() => {
        this.$axios.post(
          'MechineController/removeMechineByMechineId',
          this.$qs.stringify({
            mechineId:row.mechineId,
          })
        ).then((response) => {
          if(response.data == 1){
            this.$message({type: 'success', message: '删除成功!'});
          }else if(response.data == -1){
            alert('设备正在运行中，无法删除！')
          }else{
            alert('删除设备失败！');
          }
          this.getAllMechine();
        }).catch((value) => {
          console.error(value);
        })
      })
    }
  },
  created(){
    this.user=this.$getSessionStorage('user');
    if(this.user != null){
      this.getAllMechine();
    }

  },
  components: {
    Top,
  },
}
</script>
